<template>
    <page>
        <!-- 表单 -->
        <template #hd>
          <!-- label-width="80px" 输入框前面的文字保持一样的宽度 -->
            <el-form :model="form" class="demo-form-inline" label-width="80px">
                <el-row :gutter="20">
                    <el-form-item label="手机号"  prop='bian' style="width: 300px;">
      <!-- 查询不在对象中了拿了出来 -->
      <el-input v-model="list.bian" placeholder="请输入商品编号"/>
    </el-form-item>
    <el-form-item label="关键字"  prop='name' style="width: 300px;" >
      <!-- 查询不在对象中了拿了出来 -->
      <el-input v-model="yingname" placeholder="请输入关键字"/>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="chaxun"  color="#00acac" :dark="isDark" style="border:none"><el-icon>
        <Search />
      </el-icon>查询</el-button>
      <el-button class="but" color="#00acac" :dark="isDark"><el-icon>
        <Refresh />
      </el-icon>重置</el-button>
    </el-form-item>
</el-row>

  </el-form>
        </template>
        <!-- 列表 -->
        <template #ct>
            <el-table :data="lists" style="width: 100% ">
                <el-table-column prop="id" label="id"  width="100px"/>
    <el-table-column prop="bian" label="手机号"  v-model="list.bian" width="200px">
      </el-table-column>
    <el-table-column prop="neirong" label="短信信息" width="850px">
    </el-table-column>
    <el-table-column prop="turnoverTime" label="更新时间"  width="160px">
      <template #default="{ row }"> {{ formatTime(row.updatedAt) }}</template>
    </el-table-column>
         </el-table>
       </template>
       <!-- 分页 -->
       <template #ft>
        <el-pagination
  background
  layout="total,prev, pager, next, sizes, next, jumper"
  :total="total"
  :default-page-size="limit"
  :current-page="page"
  @size-change="handeSizeChange"
  @current-change="handlePageChange"
/>
       </template>
    </page>
    <!-- 编辑 -->
    <el-dialog v-model="bian2" title="新增信息" class="tanc">
      <el-form :model="bianji" class="inline" ref="addfrom" label-width="100px" :rules="rules">
    <el-form-item label="用户名"  prop='name' style="width: 300px;">
      <el-input v-model="bianji.name" />
    </el-form-item>
    <el-form-item label="英文名" style="width: 300px;" prop='yingname'>
      <el-input v-model="bianji.yingname" />
    </el-form-item>
    <el-form-item label="模板编码"  style="width: 300px;" prop='bian'>
      <el-input v-model="bianji.bian" />
    </el-form-item>
    <el-form-item label="备注信息"  prop='bei'>
           <el-input
           v-model="bianji.neirong"
    :rows="2"
    type="textarea"
    placeholder="输入内容"
  />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <!-- 单选 -->
          <el-radio-group v-model="bianji.state" >
    <el-radio label="1" name="state">启动</el-radio>
    <el-radio label="0" name="state">禁用</el-radio>
       </el-radio-group>
        </el-form-item>
<el-row>
  <el-button type="primary" @click="handleEidt"
         class="bb">确定</el-button>
   <el-button @click="tan=false" class="quxiao">取消</el-button>
</el-row>
  </el-form>
  </el-dialog>
</template>
<script lang="ts" src="./message3">

</script>
<!-- 样式 -->
<style>
.demo-form-inline {
  background-color: gainsboro;
  border-radius: 10px;
  margin: 0 10px;
  padding-top: 10px;
  padding-left:10px
}
/* 表单字体颜色 */
.el-form-item__label {
  color: #606266;
  font-weight: 800;
  margin: 0;
  margin-left:10px;
  justify-content: none;
}
/* 按钮 */
.bb{
  background-color: #00acac;
  border:none;
}
.bb:hover{
  background-color: #00acacab;
}
.el-button:hover{
  color: white;
    background-color: #00acac97;
}
.but{
    font-weight:100;
    color:#000;
  background-color:white;
  border:none
}
.but:hover{
    color: #00acace3;
  background-color: #00acac3e;
}
/* 修改按钮 */
.sapn {
  display: flex;
  justify-content: space-between;
}
/* 分页的颜色 */
.el-pagination.is-background .el-pager li.is-active{
  color: white;
  background-color: #00acac;
}
/* 分页悬停 */
.el-pager li:hover{
  color: #00acac;
}
/* 弹窗颜色 */
.tanc {
  background-color: #00acac;
}
/* 表单 */
.inline {
  padding-top: 10px;
  padding-bottom:20px;
  padding-left:20px;
  background-color: white;
}
/* 更多的背景 */
.el-table{
  border: none;
}
/* 单选按钮颜色 */
.el-radio__input.is-checked+.el-radio__label{
  color:#00acac;
}
.el-radio__input.is-checked .el-radio__inner{
  background-color:#00acac;
  color:#00acac;
}
</style>
